<template>
  <div v-if="showConflict" class="conflict-container">
    <div class="conflict-main">
      <div class="conflict-top">
        <img class="shrink-btn" src="/images/shrink.png" alt="" @click="shrinkBtnClick" />
        <div class="title">冲突项</div>
        <div class="separator"></div>
      </div>
      <div class="conflict-content">
        <ul>
          <transition-group name="slide-fade" tag="p">
            <li
              v-for="item of curConflictInfo"
              :key="item.value"
              :style="{ color: item.isAdjust ? '#0f0' : '#f00' }"
              @click="conflictInfoClick(item.value)"
            >
              {{ item.label }}
              <img :src="item.isAdjust ? '/images/approved.png' : '/images/error.png'" alt="" />
            </li>
          </transition-group>
        </ul>
      </div>
    </div>

    <div v-if="curConflictType" class="plan-adjust">
      <div class="conflict-top">
        <!-- <img class="shrink-btn" src="/images/shrink.png" alt="" @click="shrinkBtnClick" /> -->
        <div class="title">计划预调配</div>
        <div class="separator"></div>
      </div>
      <div v-if="curConflictType == 1" class="adjust-item">
        <span class="adjust-label">起飞时间：</span>
        <el-date-picker v-model="newAirStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder=""> </el-date-picker>
        <button class="adjust-btn">时间空窗</button>
      </div>
      <div v-if="curConflictType == 3" class="adjust-item">
        <span class="adjust-label">飞行高度：</span>
        <el-select v-model="newFlyHeight" placeholder="请选择">
          <el-option v-for="item in flyHeightOptions" :key="item.label" :label="item.label" :value="item.label"> </el-option>
        </el-select>
        <span
          class="capacity-text"
        >剩余容量：
          <em :style="{ color: curCapacity ? '#0f0' : '#f00' }">{{ curCapacity }}</em>
        </span>
        <!-- <button class="adjust-btn">时间空窗</button> -->
      </div>

      <div class="btn-gtoup">
        <button class="btn-reset" @click="reset">重置</button>
        <button class="btn-confirm" @click="confirm">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import axios from 'axios'
export default {
  name: 'ConflictView',
  data() {
    return {
      showConflict: true,
      conflictTypes: [1, 2, 3],
      curConflictType: null,
      curConflictInfo: [],
      oldAirStartTime: '2020-05-13 00:00:00',
      newAirStartTime: '2020-05-13 00:00:00',
      oldFlyHeight: '4000m-5000m',
      newFlyHeight: '4000m-5000m',
      flyHeightOptions: [
        {
          label: '2000m-3000m',
          capacity: 10
        },
        {
          label: '3000m-4000m',
          capacity: 2
        },
        {
          label: '4000m-5000m',
          capacity: 0
        },
        {
          label: '5000m-6000m',
          capacity: 3
        }
      ],
      conflictInfoMap: [
        {
          value: 1,
          label: '计划起飞时间冲突'
        },
        {
          value: 2,
          label: '航线冲突'
        },
        {
          value: 3,
          label: '容量冲突'
        },
        {
          value: 4,
          label: '轨迹冲突'
        }
      ],
      conflictPosition: [
        {
          value: 1,
          position: {
            lon: 116.49488223929019,
            lat: 36.07046075577599,
            alt: 1707.0291411183725,
            heading: 303.86967577292273,
            pitch: -53.85099716356474,
            roll: 359.74183908529756
          }
        },
        {
          value: 3,
          position: {
            lon: 116.11333032871408,
            lat: 35.059783941050505,
            alt: 36497.67205677311,
            heading: 25.452950318126767,
            pitch: -18.154431046753626,
            roll: 0.057789387719774855
          }
        }
      ]
    }
  },
  computed: {
    curCapacity() {
      let curCapacity
      this.flyHeightOptions.forEach(item => {
        if (item.label === this.newFlyHeight) {
          curCapacity = item.capacity
        }
      })
      return curCapacity
    }
  },
  mounted() {
    this.getCurConflictInfos()
    this.addConflictAnimation()
    // this.curConflictInfo[0].isAdjust = true
  },
  methods: {
    // 获取冲突信息
    getCurConflictInfos() {
      const curConflictInfo = this.conflictInfoMap.filter(item => {
        return this.conflictTypes.indexOf(item.value) !== -1
      })
      curConflictInfo.forEach(item => {
        item.isAdjust = false
      })
      this.curConflictInfo = curConflictInfo
    },
    shrinkBtnClick() {
      this.showConflict = false
    },
    reset() {
      this.newAirStartTime = this.oldAirStartTime
    },
    confirm() {
      const hasIndex1 = this.getArrayIndex(this.curConflictInfo, 1)
      const hasIndex3 = this.getArrayIndex(this.curConflictInfo, 3)
      if (hasIndex1 !== -1 && this.newAirStartTime !== this.oldAirStartTime) {
        Message({
          message: '起飞时间修改成功，时间冲突消解',
          type: 'success',
          duration: 2000
        })
        this.removeTimeConflict()
        this.curConflictInfo.splice(hasIndex1, 1)
      }
      if (hasIndex3 !== -1 && this.curCapacity > 0) {
        Message({
          message: '飞行高度修改成功，容量冲突消解',
          type: 'success',
          duration: 2000
        })
        this.removeCapacityConflict()
        this.curConflictInfo.splice(hasIndex3, 1)
      }
    },
    getArrayIndex(arrays, value) {
      let i = arrays.length
      while (i--) {
        if (arrays[i].value === value) {
          return i
        }
      }
      return -1
    },
    // 点击冲突
    conflictInfoClick(conflictType) {
      this.curConflictType = conflictType
      let position
      this.conflictPosition.forEach(item => {
        if (item.value === conflictType) {
          position = item.position
        }
      })
      if (position) {
        this.$earth.IEflyTo(position)
      }
    },
    // 添加冲突动画
    addConflictAnimation() {
      this.conflictTypes.forEach(item => {
        switch (item) {
        case 1:
          this.renderTimeConflict()
          break
        case 3:
          this.renderCapacityConflict()
          break

        default:
          break
        }
      })
    },
    // 渲染起飞时间冲突
    renderTimeConflict() {
      const targetData1 = [
        [116.4795768347366, 36.07100209317104, 0, '2020/05/19 15:00:00'],
        [116.48298777508346, 36.075325619848364, 0, '2020/05/19 15:01:00'],
        [116.4892512606867, 36.08325615128758, 500, '2020/05/19 15:03:00']
      ]
      const targetData2 = [
        [116.4794458091013, 36.071256302654014, 0, '2020/05/19 15:00:00'],
        [116.4827012346288, 36.075469857438854, 0, '2020/05/19 15:01:00'],
        [116.48974324872628, 36.084509006963955, 500, '2020/05/19 15:03:00']
      ]
      targetData1.forEach(item => {
        item[3] = new Date(item[3]).getTime()
      })
      targetData2.forEach(item => {
        item[3] = new Date(item[3]).getTime()
      })
      const startTime = targetData1[0][3]
      const endTime = targetData1[2][3]

      this.$earth.timeConflictHistory = new GV.TargetHistory(this.$earth.viewer)
      this.$earth.timeConflictHistory.smoothTrack = true
      this.$earth.timeConflictHistory.removeAll()

      const targetId1 = '起飞时间冲突-1'
      const targetId2 = '起飞时间冲突-2'
      const tTarget1 = new GV.TargetItem(targetId1, targetData1[0][0], targetData1[0][1], targetData1[0][2])
      const tTarget2 = new GV.TargetItem(targetId2, targetData2[0][0], targetData2[0][1], targetData2[0][2])

      tTarget1.name = targetId1
      tTarget2.name = targetId2
      tTarget2.angle = tTarget1.angle = Math.random() * 360

      tTarget1.styleCode = tTarget1.styleCode = 'defult'
      const style = (tTarget1.style = tTarget2.style)
      style.pointDisplayConditionn = new Cesium.DistanceDisplayCondition(60000000)
      style.labelDisplayCondition = new Cesium.DistanceDisplayCondition(6000, 600000)
      style.iconDisplayCondition = new Cesium.DistanceDisplayCondition(60000, 60000000)
      style.modelDisplayCondition = new Cesium.DistanceDisplayCondition(0, 600000)
      style.labeloffsetx = 10
      style.labeloffsety = -20
      style.iconSize = 32
      style.modelUrl = '/data/model/Cesium_Air.glb'
      style.iconUrl = '/data/model/003.png'
      style.color = '#ff0000'

      this.$earth.timeConflictHistory.addTargetHistory(tTarget1, targetData1)
      this.$earth.timeConflictHistory.addTargetHistory(tTarget2, targetData2)

      this.$earth.timeConflictHistory.setTimeSection(startTime, endTime)
      this.$earth.timeConflictHistory.pointSize = 0
      this.$earth.timeConflictHistory.lineColor = Cesium.Color.BLUE

      const start = Cesium.JulianDate.fromDate(new Date(startTime))
      const stop = Cesium.JulianDate.fromDate(new Date(endTime))
      this.$earth.viewer.clock.startTime = start.clone()
      this.$earth.viewer.clock.stopTime = stop.clone()
      this.$earth.viewer.clock.currentTime = start.clone()
      this.$earth.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP // 末尾循环
    },
    removeTimeConflict() {
      if (this.$earth.timeConflictHistory) {
        this.$earth.timeConflictHistory.removeAll()
      }
    },
    // 渲染空域容量冲突
    renderCapacityConflict() {
      this.addCapacityConflictAirLine()
      this.addAirSpace()
    },
    removeCapacityConflict() {
      this.removeCapacityConflictHistory()
      this.removeAirSpace()
    },
    addCapacityConflictAirLine() {
      const targetData = [
        [116.47952621986616, 36.071198852264445, 0, '2020/05/19 15:00:00'],
        [116.48285218355771, 36.075492470800974, 0, '2020/05/19 15:00:20'],
        [116.5461853651928, 36.1662073831221, 4500, '2020/05/19 15:01:00'],
        [116.71591405562393, 36.193791762690516, 4500, '2020/05/19 15:02:00'],
        [116.90695462025818, 36.1497515699721, 4500, '2020/05/19 15:03:00'],
        [116.96430344102158, 36.02932009739376, 4500, '2020/05/19 15:04:00'],
        [116.94118380002611, 35.879526305351426, 4500, '2020/05/19 15:05:00'],
        [116.84324594986136, 35.76962038343812, 4500, '2020/05/19 15:06:00'],
        [116.61811749470841, 35.762611408144124, 4500, '2020/05/19 15:07:00'],
        [116.43414899616275, 35.79906653223648, 4500, '2020/05/19 15:08:00'],
        [116.3850136308569, 35.89274191228173, 4500, '2020/05/19 15:09:00'],
        [116.42104131806921, 35.99373449730933, 4500, '2020/05/19 15:10:00'],
        [116.47952621986616, 36.071198852264445, 0, '2020/05/19 15:11:00']
      ]
      targetData.forEach(item => {
        item[3] = new Date(item[3]).getTime()
      })

      const startTime = targetData[0][3]
      const endTime = targetData[targetData.length - 1][3]

      this.$earth.capacityConflictHistory = new GV.TargetHistory(this.$earth.viewer)
      this.$earth.capacityConflictHistory.smoothTrack = false
      this.$earth.capacityConflictHistory.removeAll()

      const targetId = '容量冲突-1'

      const tTarget = new GV.TargetItem(targetId, targetData[0][0], targetData[0][1], targetData[0][2])

      tTarget.name = targetId

      tTarget.angle = Math.random() * 360

      tTarget.styleCode = 'defult'
      const style = tTarget.style
      style.pointDisplayConditionn = new Cesium.DistanceDisplayCondition(60000000)
      style.labelDisplayCondition = new Cesium.DistanceDisplayCondition(6000, 600000)
      style.iconDisplayCondition = new Cesium.DistanceDisplayCondition(60000, 60000000)
      style.modelDisplayCondition = new Cesium.DistanceDisplayCondition(0, 600000)
      style.labeloffsetx = 10
      style.labeloffsety = -20
      style.iconSize = 32
      style.modelUrl = '/data/model/Cesium_Air.glb'
      style.iconUrl = '/data/model/003.png'
      style.color = '#ff0000'

      this.$earth.capacityConflictHistory.addTargetHistory(tTarget, targetData)

      this.$earth.capacityConflictHistory.setTimeSection(startTime, endTime)
      this.$earth.capacityConflictHistory.pointSize = 0
      this.$earth.capacityConflictHistory.lineColor = Cesium.Color.BLUE

      const start = Cesium.JulianDate.fromDate(new Date(startTime))
      const stop = Cesium.JulianDate.fromDate(new Date(endTime))
      this.$earth.viewer.clock.startTime = start.clone()
      this.$earth.viewer.clock.stopTime = stop.clone()
      this.$earth.viewer.clock.currentTime = start.clone()
      this.$earth.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP // 末尾循环
    },
    removeCapacityConflictHistory() {
      if (this.$earth.capacityConflictHistory) {
        this.$earth.capacityConflictHistory.removeAll()
      }
    },
    // 添加空域
    addAirSpace() {
      this.$earth.customAirSpaceGroup = new GV.GraphicGroup()
      this.$earth.viewer.graphicLayer.add(this.$earth.customAirSpaceGroup)
      const that = this
      axios.get('/data/LayerData/airspace/customAirspace.json').then(res => {
        that.customAirSpaceData = res.data.features
        res.data.features.forEach((item, index) => {
          const positions = []
          item.geometry.coordinates[0].forEach(innerItem => {
            positions.push(new GV.GeoPoint(innerItem[0], innerItem[1]))
          })

          const customAirSpacePolygonList = []
          customAirSpacePolygonList.push(
            new GV.PolygonGraphic({
              name: 'customAirSpace-2000_3000',
              positions: positions, // 设置坐标
              height: 2000,
              extrudedHeight: 3000,
              color: 'rgba(98, 173, 248, 0.1)', // 填充色
              outline: true, // 是否有外边框
              outlineColor: 'rgba(98, 173, 248, 0.8)', // 边框色
              outlineWidth: 3 // 边框宽度
            })
          )
          customAirSpacePolygonList.push(
            new GV.PolygonGraphic({
              name: 'customAirSpace-3000_4000',
              positions: positions, // 设置坐标
              height: 3000,
              extrudedHeight: 4000,
              color: 'rgba(98, 173, 248, 0.1)', // 填充色
              outline: true, // 是否有外边框
              outlineColor: 'rgba(98, 173, 248, 0.8)', // 边框色
              outlineWidth: 3 // 边框宽度
            })
          )
          customAirSpacePolygonList.push(
            new GV.PolygonGraphic({
              name: 'customAirSpace-4000_5000',
              positions: positions, // 设置坐标
              height: 4000,
              extrudedHeight: 5000,
              color: 'rgba(98, 173, 248, 0.1)', // 填充色
              outline: true, // 是否有外边框
              outlineColor: 'rgba(255,0,0, 0.8)', // 边框色
              outlineWidth: 3 // 边框宽度
            })
          )
          customAirSpacePolygonList.push(
            new GV.PolygonGraphic({
              name: 'customAirSpace-5000_6000',
              positions: positions, // 设置坐标
              height: 5000,
              extrudedHeight: 6000,
              color: 'rgba(98, 173, 248, 0.1)', // 填充色
              outline: true, // 是否有外边框
              outlineColor: 'rgba(98, 173, 248, 0.8)', // 边框色
              outlineWidth: 3 // 边框宽度
            })
          )
          customAirSpacePolygonList.forEach(item => {
            item.cursor = true
            item.mouseMove = that.handelMousemove
            that.$earth.customAirSpaceGroup.add(item)
          })
        })
      })
    },
    handelMousemove(entity, mousePosition) {
      const heightRange = entity.name.split('-')[1]
      const data = this.customAirSpaceData[0].properties
      const infoBoxData = []
      const keys = Object.keys(data)
      keys.forEach(key => {
        const obj = {
          label: key,
          value: data[key]
        }
        infoBoxData.push(obj)
      })
      const capacityInfo = {}
      switch (heightRange) {
      case '2000_3000':
        capacityInfo.label = '2000m-3000m 空域剩余容量'
        capacityInfo.value = 10
        break
      case '3000_4000':
        capacityInfo.label = '3000m-4000m 空域剩余容量'
        capacityInfo.value = 2
        break
      case '4000_5000':
        capacityInfo.label = '4000m-5000m 空域剩余容量'
        capacityInfo.value = 0
        break
      case '5000_6000':
        capacityInfo.label = '5000m-6000m 空域剩余容量'
        capacityInfo.value = 3
        break
      default:
        break
      }
      infoBoxData.push(capacityInfo)
      this.$store.dispatch('layerManage/setInfoBoxShowFun', true)
      this.$store.dispatch('layerManage/setInfoBoxDataFun', infoBoxData)
      this.$store.dispatch('layerManage/setInfoBoxLeftValFun', mousePosition.x)
      this.$store.dispatch('layerManage/setInfoBoxTopValFun', mousePosition.y)
    },
    // 移除空域
    removeAirSpace() {
      if (this.$earth.customAirSpaceGroup) {
        this.$earth.customAirSpaceGroup.clear()
        this.$earth.customAirSpaceGroup = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all 0.4s ease;
}
.slide-fade-leave-active {
  transition: all 0.4s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
.conflict-container {
  position: absolute;
  top: 194px;
  left: 1219px;
  .conflict-main {
    width: 321px;
    height: 208px;
    background: rgba(5, 34, 74, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(8, 75, 108, 1);
    .conflict-top {
      margin-bottom: 8px;
      .title {
        margin-top: 10px;
        margin-left: 16px;
        margin-bottom: 5px;

        font-size: 16px;
        font-weight: 400;
        color: rgba(98, 173, 248, 1);
        line-height: 22px;
      }
      .shrink-btn {
        cursor: pointer;
        position: absolute;
        top: 16px;
        right: 20px;
        width: 12px;
        height: 13px;
      }
      .separator {
        height: 1px;
        border-right: 70px solid #fff;
        border-left: 250px solid #17336b;
      }
    }
    .conflict-content {
      li {
        &:hover {
          color: #fff !important;
        }
        margin: 6px 10px;
        color: rgba(210, 4, 4, 1);
        cursor: pointer;
        img {
          width: 14px;
          float: right;
        }
      }
    }
  }
  .plan-adjust {
    margin-top: 10px;
    position: relative;
    width: 321px;
    height: 208px;
    background: rgba(5, 34, 74, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(8, 75, 108, 1);
    .conflict-top {
      margin-bottom: 8px;
      .title {
        margin-top: 10px;
        margin-left: 16px;
        margin-bottom: 5px;

        font-size: 16px;
        font-weight: 400;
        color: rgba(98, 173, 248, 1);
        line-height: 22px;
      }
      .shrink-btn {
        cursor: pointer;
        position: absolute;
        top: 16px;
        right: 20px;
        width: 12px;
        height: 13px;
      }
      .separator {
        height: 1px;
        border-right: 70px solid #fff;
        border-left: 250px solid #17336b;
      }
    }
    .adjust-item {
      margin: 16px;
      font-size: 12px;
      .adjust-label {
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 17px;
      }
      /deep/ .el-date-editor {
        width: 161px;
        .el-input__inner {
          color: #fff;
          background: rgba(5, 34, 74, 0.5);
          border-radius: 4px;
          border: 1px solid rgba(8, 75, 108, 1);
          padding-right: 0px;
          height: 26px;
        }
        .el-input__prefix,
        .el-input__suffix {
          top: -2px;
        }
        .el-input__suffix .el-input__icon {
          color: #84e2fc;
        }
      }
      /deep/ .el-select {
        .el-input--small .el-input__inner {
          width: 139px;
          height: 26px;
          background: rgba(0, 40, 72, 1);
          border-radius: 4px;
          border: 1px solid rgba(6, 94, 166, 1);
          color: #fff;
        }
        .el-input__suffix {
          top: 3px;
        }
      }

      .adjust-btn {
        color: #fff;
        width: 60px;
        height: 26px;
        background: #033272;
        border-radius: 4px;
        border: 1px solid #033272;
        font-size: 12px;
        padding: 0;
        margin-left: 8px;
      }
      .capacity-text {
        margin-left: 10px;

        color: #fff;
      }
    }
    .btn-gtoup {
      position: absolute;
      bottom: 13px;
      right: 16px;
      .btn-reset,
      .btn-confirm {
        &:hover {
          color: #84e2fc;
        }
        color: #fff;
        width: 60px;
        height: 26px;
        background: #033272;
        border-radius: 4px;
        border: 1px solid #033272;
        font-size: 12px;
        padding: 0;
        margin-left: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>
